<template>
	<view class="content_box">
		<view class="header">
			<view class="title">香哈菜谱大全</view>
			<text class="title2">小白学做菜必备烹饪助手</text>
			<view class="search"></view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular indicator-dots autoplay indicator-active-color="#ee8131">
				<swiper-item v-for="item in swipers" :key="item._id">
					<image class="swiper-item" :src="item.image_src"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="menu">
			<view class="menu_item" @click="toOtherPage(item.name)" v-for="item in menus" :key="item._id">
				<image :src="item.image_src"></image>
				<text class="menu_name">{{item.name}}</text>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="container">
			<view class="small_swiper box">
				<swiper class="floor_swiper" circular indicator-dots autoplay indicator-active-color="#ee8131">
					<swiper-item v-for="item in floorSwiper.floor_imgs" :key="item._id">
						<image class="swiper-item" :src="item"></image>
					</swiper-item>
				</swiper>
				<view class="title">{{floorSwiper.floor_title}}</view>
			</view>
			<view class="up_down box">
				<view class="item" v-for="item in floor" :key="item._id">
					<image :src="item.floor_imgs"></image>
					<view class="title">{{item.floor_title}}</view>
				</view>
			</view>
			<view class="container_item" v-for="item in recommend" :key="item._id">
				<image :src="item.coverpic"></image>
				<view class="name">{{item.name}}</view>
				<view class="buttom">
					<text class="left">{{item.pageview}}</text>
					<text class="right">{{item.collections}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSwiperApi,
		getMenusApi,
		getFloorApi,
		getRecommendApi
	} from "../../apis/home.js"
	export default {
		mounted() {
			this.getSwiperData()
			this.getMenusData()
			this.getFloorData()
			this.getRecommendData()
		},
		data() {
			return {
				swipers: [],
				menus: [],
				floorSwiper: {},
				floor: [],
				recommend: []
			};
		},
		methods: {
			//获取轮播图
			getSwiperData() {
				getSwiperApi().then(res => {
					this.swipers = res.message
				})
			},
			//获取分类数据
			getMenusData() {
				getMenusApi().then(res => {
					this.menus = res.message
				})
			},
			//获取楼层数据
			getFloorData() {
				getFloorApi().then(res => {
					this.floorSwiper = res.message.shift()
					this.floor = res.message
				})
			},
			//获取推荐
			getRecommendData() {
				getRecommendApi().then(res => {
					this.recommend = res.message
				})
			},
			//跳转页面
			toOtherPage(val) {
				switch (val) {
					case "分类":
						uni.navigateTo({
							url: "/pages/sub/categories/categories"
						})
						break; 
					case "甜点":
						uni.navigateTo({
							url:"/pages/sub/search/search"
						})
						break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_box {
		padding: 0rpx 32rpx;
	}

	//头部
	.header {
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 1;
		width: 100%;
		height: 220rpx;
		background: url("/static/image/mengbanzu250.png") no-repeat;
		background-size: cover;
		padding: 70rpx 32rpx 0rpx;
		box-sizing: border-box;
		color: #ffffff;

		.title {
			font-size: 40rpx;
		}

		.title2 {
			font-size: 24rpx;
		}

		.search {
			width: 100%;
			height: 72rpx;
			background-color: #ffffff;
			border-radius: 36rpx;
			margin-top: 20rpx;
			box-shadow: 0rpx 1rpx 1rpx 0rpx #e8e5df;
		}
	}

	//轮播
	.uni-margin-wrap {
		margin-top: 280rpx;
		width: 100%;
		border-radius: 16rpx;
		overflow: hidden;

		.swiper {
			border-radius: 16rpx;

			.swiper-item {
				height: 300rpx;
				width: 100%;
				border-radius: 16rpx;
			}
		}
	}

	//菜单
	.menu {
		margin-top: 32rpx;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 28rpx;

		.menu_item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.menu_name {
				margin-top: 8rpx;
				font-size: 26rpx;
				color: #3b3b3b;
			}
		}
	}

	//内容
	.container {
		margin-top: 36rpx;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 26rpx 20rpx;
		padding-bottom: 40rpx;

		.box {
			height: 360rpx;
			border-radius: 10rpx;
			overflow: hidden;
			position: relative;

			.title {
				width: 160rpx;
				height: 60rpx;
				background-color: rgba(#d86f32, 0.63);
				border-radius: 8rpx;
				position: absolute;
				top: 12rpx;
				left: 12rpx;
				color: #ffffff;
				line-height: 60rpx;
				font-weight: bold;
				text-align: center;
				font-size: 26rpx;
			}

			.floor_swiper {
				width: 100%;
				height: 100%;

				swiper-item {
					width: 100%;
					height: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}

		.up_down {
			display: grid;
			grid-template-rows: repeat(2, 1fr);
			gap: 10rpx;

			.item {
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.title {
					width: 160rpx;
					height: 60rpx;
					background-color: rgba(#d86f32, 0.63);
					border-radius: 8rpx;
					position: absolute;
					top: 12rpx;
					left: 12rpx;
					color: #ffffff;
				}
			}
		}

		//推荐数据
		.container_item {
			height: 320rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 248rpx;
				border-radius: 10rpx;
			}

			.name {
				font-size: 28rpx;
			}

			.buttom {
				font-size: 22rpx;
				color: #aaaaaa;

				.left {
					padding-right: 34rpx;
					background: url("../../static/image/mengbanzu278.png") no-repeat;
					background-position: right;
					margin-right: 60rpx;
				}

				.right {
					padding-right: 32rpx;
					background: url("/static/image/mengbanzu279.png") no-repeat;
					background-position: right;
				}
			}
		}
	}
</style>
